<template>
  <div class="gouwuchebox">
    <div class="title">
      <div>
        购物车 <span style="font-size: 14px">({{ gouwuche.length }})</span>
      </div>
      <div class="sousuo">
        <input
          type="text"
          placeholder="搜索购物车商品"
          class="search-input"
          v-model="search"
          @input="performSearch"
        />
        <span class="search-icon"><van-icon name="search" /></span>
        <!-- 搜索图标 -->
      </div>
    </div>

    <!-- 弹出结算界面 -->

    <van-popup
      v-model="subShow"
      @click-overlay="submitYes"
      position="top"
      :style="{ height: '100%', overflow: 'hidden' }"
      style="padding: 0 20rem; box-sizing: border-box"
    >
      <!-- 需要提交的商品 -->

      <div style="width: 100vw; text-align: center; margin: 10rem; color: red">
        <!-- 以下商品已经加入订单 -->

        <van-nav-bar
          title="支付订单"
          left-text="返回"
          @click-left="submitYes"
          style="position: fixed; top: 0; left: 0; width: 100vw"
        />
      </div>
      <div
        style="
          margin: 5rem 0;
          border-radius: 15rem;
          background-color: #fafafa;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 55rem;
          height: 8vh;
        "
      >
        <span class="iconfont icon-dingwei" style="font-size: 25rem"></span>
        <div
          style="
            width: 80vw;

            /* text-align: center; */
          "
          v-if="this.uesrs.loch"
        >
          <div style="padding-bottom: 10rem">
            {{ this.uesrs?.loch[lochindex]?.Longcity }}
          </div>

          <div>
            <span style="margin: 5rem 0rem; color: #afafaf">
              {{ this.uesrs?.loch[lochindex].name }}
              <span style="font-size: 12rem">
                {{ this.uesrs?.loch[lochindex].tel }}</span
              >
            </span>
          </div>
        </div>
      </div>
      <div class="submitYourProduct">
        <div v-for="(item, index) in submitArr" :key="index">
          <van-card
            :num="item.num"
            :price="item.price"
            :desc="item?.specification"
            :title="item.name"
            :thumb="item.imgs"
            style="width: 88vw"
          />
        </div>
      </div>

      <div
        style="width: 100vw; text-align: center; margin: 5rem 0"
        v-if="this.uesrs?.loch"
      >
        <!-- <span style="color: red">请确认收货地址</span> -->

        <!-- 地址选择 -->
      </div>

      <!-- 选择地址 -->
      <van-popup
        v-model="setlchshow"
        style="width: 90vw; height: 30vh; overflow-y: scroll"
        round
      >
        <!-- <div v-for="(item, index) in " :key="index"></div> -->
        <van-address-list
          v-model="lochindex"
          :list="this.uesrs.loch"
          @add="addLocale"
          default-tag-text="默认"
        />
      </van-popup>

      <div
        style="
          margin: 5rem 0;
          background-color: #fafafa;
          border-radius: 5rem;
          padding: 10rem;
        "
      >
        <div style="width: 100%; font-size: 15rem; text-align: center">
          请付款<span style="color: red">￥{{ priceall }}</span>
        </div>
        <van-password-input
          :value="payent"
          :focused="payShow"
          @focus="payShow = true"
          :mask="false"
          :length="6"
        />
      </div>

      <van-number-keyboard
        v-model="payent"
        :show="payShow"
        @blur="payShow = false"
        @input="payentinput"
        style="margin-bottom: 10rem"
      />
    </van-popup>

    <!-- 弹出地址设置界面 -->
    <van-popup
      v-model="locShow"
      position="bottom"
      :style="{ height: '70%' }"
      round
    >
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        ref="addressEdit"
      />
    </van-popup>

    <!-- 设置密码 -->

    <van-popup
      v-model="showKeyboard"
      @click-overlay="submitYes"
      position="bottom"
      :style="{ height: '60vh' }"
      round
    >
      <div
        style="
          width: 100vw;
          font-size: 30rem;
          text-align: center;
          margin-top: 20rem;
          margin-bottom: 10rem;
        "
      >
        请设置六位支付密码
      </div>
      <van-password-input
        :value="PayPassword"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
        :mask="false"
        :length="6"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="PayPassword"
        :show="showKeyboard"
        @blur="showKeyboard = false"
        @input="PayPasswordinput"
        @hide="setpsw"
      />
    </van-popup>

    <!-- 购物车 -->
    <div>
      <!-- {{ gouwuche }} -->
      <van-checkbox-group
        v-model="result"
        ref="checkboxGroup"
        @change="allclick"
        style="padding-bottom: 50rem"
      >
        <div
          v-for="item in showArr"
          :key="item?.specification"
          class="swcell"
          style="width: 100vw; display: flex; align-items: center"
        >
          <van-swipe-cell style="width: 100vw">
            <div class="swcall">
              <van-checkbox
                v-model="item.check"
                :name="item?.specification"
                style="display: inline-block; margin-left: 10rem"
              ></van-checkbox>

              <van-card
                :class="{ actv: item.check }"
                :num="item.num"
                :price="item.price"
                :desc="item?.specification"
                :title="item.name"
                class="goods-card"
                :thumb="item.imgs"
                style="width: 91vw; margin: 0"
              />
            </div>

            <template #right>
              <van-button
                square
                type="danger"
                text="删除"
                style="height: 100%"
                @click="delitem({ idx: item.specification, arr: result })"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-checkbox-group>
    </div>

    <!-- 底部结算 -->
    <van-submit-bar
      style="bottom: 50rem"
      :price="priceall * 100"
      button-text="提交订单"
      @submit="submitclick"
    >
      <van-checkbox v-model="alck" @click="cancel">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>














<script>
import { Toast } from "vant";
import { mapMutations } from "vuex";
import { areaList } from "@vant/area-data";

export default {
  name: "MiJiaoGouWuChe",

  data() {
    return {
      checked: true,

      areaList,
      // 勾选商品
      result: [],
      search: "",
      alck: false,

      showArr: [],

      // 待提交的订单

      submitArr: null,
      subShow: false,

      // 输入支付密码弹窗
      payShow: false,
      payent: "",

      // 设置密码弹窗
      showKeyboard: false,
      PayPassword: "",

      // 设置地址弹窗
      locShow: false,
      // 设置地址下标
      lochindex: 0,
      setlchshow: false,
    };
  },

  methods: {
    ...mapMutations([
      "itemcheck",
      "chengbox",
      "cancelchk",
      "delitem",
      "setAPaymentPassword",
      "setloch",
      "setshop",
      'setalertindex'
    ]),

    itemclick(obj) {
      this.itemcheck(obj);
      if (this.allcheck) {
        this.alck = true;
      }
    },
    setindex() {
      setTimeout(() => {
        this.setalertindex(3);
      }, 100);

    },

    allclick() {
      // console.log("复选框变化");

      this.chengbox(this.result);
      this.alck = this.allcheck;
    },

    performSearch() {
      if (this.search) {
        this.showArr = this.gouwuche.filter((item) =>
          item.specification.toLowerCase().includes(this.search.toLowerCase())
        );
      } else {
        this.showArr = this.gouwuche; // 如果没有搜索词，显示所有数据
      }

      console.log(this.showArr);
    },

    cancel() {
      // console.log(123123123);

      if (this.allcheck) {
        this.$refs.checkboxGroup.toggleAll(false);
      } else {
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },

    // 提交订单点击
    submitclick() {
      console.log("提交订单");
      if (this.result.length) {
        if (this.uesrs.payPassword) {
          // console.log("已设置支付密码", this.uesrs.payPassword);
          if (!this.uesrs.loch) {
            Toast("请先至少设置一个地址");
            this.locShow = true;
          } else {
            this.submitArr = this.showArr.filter((it) =>
              this.result.includes(it.specification)
            );
            this.subShow = true;
          }
        } else {
          Toast("请先设置支付密码");
          this.showKeyboard = true;
        }
        // console.log(this.submitArr);
      } else {
        Toast("请先选择商品");
      }
    },

    // 确认提交订单

    submitYes() {
      if (this.uesrs.payPassword && this.uesrs.loch) {
        Toast("已经加入待支付");
        this.setshop({ arrs: this.submitArr, qianshouS: "fukuan" });
        this.submitArr = null;
        this.subShow = false;
        this.result = [];
        this.allclick();
      }
    },

    // 输入设置密码键盘事件
    PayPasswordinput() {
      if (this.PayPassword.length >= 5) {
        // this.setAPaymentPassword(this.PayPassword)
        this.showKeyboard = false;
        this.PayPassword = "";
      }
    },
    // 设置密码
    setpsw() {
      console.log("设置密码", this.PayPassword);
      this.setAPaymentPassword(this.PayPassword);

      this.showKeyboard = false;
      this.PayPassword = "";
    },

    // 设置地址
    onSave(content) {
      //  let loc = this.$refs.addressEdit.setAddressDetail()
      console.log("保存地址", content);
      let ssr = {
        name: content.name,
        tel: content.tel,
        city: `${content.province} ${content.city} ${content.county}`,
        Longcity: content.addressDetail,
        YZcode: content.postalCode,
        areaCode: content.areaCode,
        isDefault: content.isDefault,
      };
      // console.log(ssr);
      this.setloch(ssr);
      Toast("地址设置成功");
      this.locShow = false;
    },

    // 新增地址
    addLocale() {
      this.locShow = true;
    },

    // 选择地址
    openloch() {
      this.setlchshow = true;
    },
    // 输入密码时触发
    payentinput() {
      // console.log("输入密码", this.payent);
    },
  },
  activated() {
    console.log("激活");
    
    this.setindex();
  },

  computed: {
    uesrs() {
      return this.$store.state.uese;
    },

    gouwuche() {
      return this.$store.getters.toBeSubmitted;
    },

    allcheck() {
      return this.$store.getters.toBeSubmitted.every((it) => it.check);
    },

    priceall() {
      return this.$store.state.priceAll;
    },
  },

  created() {
    // this.itemcheck({ chk: true, ids: "123" });
   this.setindex();

    this.$nextTick(() => {
      this.showArr = this.gouwuche;
    });
  },
  watch: {
    gouwuche(newv) {
      this.showArr = newv;
    },

    payent(newV) {
      if (newV.length >= 6) {
        if (newV == this.uesrs.payPassword) {
          Toast("支付成功");

          this.setshop({ arrs: this.submitArr, qianshouS: "shouhuo" });
          this.submitArr = null;
          this.subShow = false;
          this.payShow = false;
          this.payent = "";

          this.result = [];
          this.allclick();
        } else {
          Toast("支付密码错误");

          this.payent = "";
        }
      }
    },
  },
};
</script>














<style lang="less" scoped>
/* 标题 */
.title {
  width: 100vw;
  height: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

/* 搜索框 */
.sousuo {
  display: flex;
  align-items: center;
  position: relative;
  /* 用于绝对定位图标 */

  .search-input {
    padding: 10px 40px;
    /* 内边距，右边留出空间给图标 */
    border: 1px solid #ddd;
    /* 边框 */
    border-radius: 20px;
    /* 圆角边框 */
    background-color: #fff;
    /* 背景颜色 */
    color: #333;
    /* 文本颜色 */
    font-size: 14px;
    /* 字体大小 */
    outline: none;
    /* 去除焦点时的轮廓线 */
    transition: all 0.3s ease;
    /* 平滑过渡效果 */

    &:focus {
      border-color: #4b9cdb;
      /* 聚焦时边框颜色 */
    }

    &::placeholder {
      color: #ccc;
      /* 占位符文本颜色 */
    }
  }

  .search-icon {
    position: absolute;
    /* 绝对定位图标 */
    right: 10px;
    /* 图标距离右边的距离 */
    color: #999;
    /* 图标颜色 */
    font-size: 18px;
    /* 图标大小 */
  }
}

.swcall {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fafafa;
}

// 结算弹窗
.submitYourProduct {
  width: 100%;
  height: 30vh;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: #fafafa;
  border-radius: 5rem;
}
</style>